<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>像素比</title>
  <style>
    img {
      width: 25px;
      height: 25px;
    }

    img:nth-child(1) {
      background: url(img/logo@1x.png) no-repeat;
      background-size: 25px 25px;
    }

    img:nth-child(2) {
      background: url(img/logo@2x.png) no-repeat;
      background-size: 25px 25px;
    }

    img:nth-child(3) {
      background: url(img/logo@3x.png) no-repeat;
      background-size: 25px 25px;
    }
  </style>
</head>

<body>
  <h3>一. 前端像素比概念</h3>
  <code>
获得设备像素比后，便可得知设备物理像素与CSS像素之间的比例。也就是window.devicePixelRatio。<br>
一倍图：当这个比率为1:1时，使用1个设备物理像素显示1个CSS像素。<br>
二倍图：当这个比率为2:1时，使用4个设备物理像素显示1个CSS像素，<br>
三倍图：当这个比率为3:1时，使用9（3*3）个设备物理像素显示1个CSS像素。
  </code>

  <h4>物理像素和物理像素比</h4>
  <ul>
    <li>物理像素点指的是屏幕显示的最小颗粒, 是物理真实存在的</li>
    <li>PC端页面的 1px 等于 1个物理像素</li>
    <li>移动端开发的 1px 不一定等于 1个物理像素</li>
    <li>1px 能显示地物理像素点个数, 成为物理像素比或屏幕像素比</li>
  </ul>

  <p>retina 视网膜屏幕是一种显示技术(摩托罗拉公司研发, 苹果发扬光大), 可以把尽可能多的物理像素点压缩至一块屏幕里, 这样可以达到更高的分辨率, 提高显示细腻程度</p>

  <h3>二. 背景缩放</h3>
  <code>
    background-size: width | width height | cover | contain; 
  </code>

  <h3>三. 使用切图插件切1x 2x 3x 图</h3>
  <div>
    <img></img>
    <img></img>
    <img></img>
  </div>
</body>

</html>